<template>
  <div class="ClassMerchant">
    <van-list
      v-model="data[active].loading"
      :finished="data[active].finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-tabs v-model="active" @change="changeActive">
        <van-tab title="价格">
          <MerchantList :list="data[0].list" />
        </van-tab>
        <van-tab title="销量">
          <MerchantList :list="data[1].list" />
        </van-tab>
        <van-tab title="距离">
          <MerchantList :list="data[2].list" />
        </van-tab>
      </van-tabs>
    </van-list>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import MerchantList from "@/components/MerchantList.vue";
import { Tab, Tabs, List } from "vant";
Vue.use(List);
Vue.use(Tab);
Vue.use(Tabs);
@Component({
  components: {
    MerchantList,
  },
})
export default class ClassMerchant extends Vue {
  private active: number = 0;
  private data = [
    {
      form: {
        lat: "",
        lon: "",
        order: 3,
        typeId: 0,
        page: 1,
        size: 20,
      },
      loading: false,
      finished: false,
      list: [],
    },
    {
      form: {
        lat: "",
        lon: "",
        order: 5,
        typeId: 0,
        page: 1,
        size: 20,
      },
      loading: false,
      finished: false,
      list: [],
    },
    {
      form: {
        lat: "",
        lon: "",
        order: 1,
        typeId: 0,
        page: 1,
        size: 20,
      },
      loading: false,
      finished: false,
      list: [],
    },
  ];
  private created() {
    this.$common.setWxConfig(window.location.href);
  }
  private changeActive(e: number) {
    this.active = e;
  }
  private onLoad(): void {
    this.$common.setWxConfig(window.location.href).then((res: boolean) => {
      if (res) {
        this.$common.getAuthToken(this.getLocation);
      }
    });
  }
  private getLocation() {
    let that = this;
    if (this.$common.getLocation("location") == null) {
      that.$wx.ready(function () {
        that.$wx.getLocation({
          type: "wgs84",
          success: function (res: any) {
            that.$common.setLocation(
              JSON.stringify({
                latitude: res.latitude,
                longitude: res.longitude,
              })
            );
            that.getData();
          },
        });
      });
    } else {
      this.getData();
    }
  }

  private getData() {
    let location = JSON.parse(this.$common.getLocation());
    this.data[this.active].form.lat = location.latitude.toString();
    this.data[this.active].form.lon = location.longitude.toString();
    this.$post("nearbyMerchant", {
      ...this.data[this.active].form,
      typeId: Number(this.$route.params.id),
    }).then((res: any) => {
      if (res.code == 0) {
        this.data[this.active].loading = false;
        this.data[this.active].list = this.data[this.active].list.concat(
          res.data.list
        );
        this.data[this.active].form.page += 1;
        if (res.data.list.length < 20) {
          this.data[this.active].finished = true;
        }
      }
    });
  }
}
</script>

<style lang="scss" scoped>
</style>